<template>
  <div>
    <div class="special-word c-shadow">
      <h4 class="detail-title">舆情风险总数：<span>{{(total1 + total) || 0}}</span></h4>
      <h4 class="detail-base-title sentiment">负面舆情</h4>
      <!-- <el-checkbox v-model="checked" class="merge">合并相似文章</el-checkbox> -->
      <div class="risk-sentiment">
        <j-no-data :mode="'b'" msg="b" v-if="publicData.length === 0"></j-no-data>
        <table v-else>
          <thead>
            <tr>
              <th v-for="title in negative" :key="title">{{title}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(list,index) in publicData" :key="index">
              <td>{{list.publishTm | dateFormat}}</td>
              <td class="over-hide" :title="list.title"><a :href="list.textLink" target="_blank">{{list.title}}</a></td>
              <td>{{list.webSrc}}</td>
              <td :title="list.keyWord">{{list.keyWord}}</td>
              <td>{{list.inputTm | dateFormat}}</td>
            </tr>
          </tbody>
        </table>
        <div class="clearFix paging-wrap">
          <el-pagination v-if="total1>5"
            class="fr"
            @size-change="handleSizeChange"
            @current-change="paging"
            :current-page.sync="listParams.pageNum1"
            :page-size="listParams.pageSize1"
            layout="prev, pager, next, jumper"
            :total.sync="total1">
          </el-pagination>
        </div>
      </div>
      <!-- 柱状图 -->
      <h4 class="detail-base-title">ICP特征词命中</h4>
      <j-no-data :mode="'b'" msg="b" v-show="noData"></j-no-data>
      <!-- <div v-show="!noData" id="specialWordChart" class="special-word-chart"></div> -->
      <table>
        <thead>
          <tr>
            <th v-for="title in tHeader" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="item.title1">
            <td>{{item.inputTm | dateFormat}}</td>
            <td>{{item.keywords}}</td>
            <td :title="item.url">{{item.url}}</td>
            <td><router-link :to="{name:'snapshot',query:{entname:entname,picName:item.pictureName,keywords:item.keywords}}">查看</router-link></td>
            <!-- <td>{{item.source}}</td> -->
          </tr>
        </tbody>
      </table>
      <j-no-data :mode="'b'" msg="b" v-if="data.length === 0"></j-no-data>
    </div>
    <div class="clearFix paging-wrap">
      <el-pagination
        class="fr"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNum"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { entdetail as api } from '../../api'
import { Code } from '../../assets/js/operaCode.js'
import { jNoData } from '../../components'
// import transfer from '../../store/temporaryTransfer.js'
export default {
  data() {
    return {
      entname: '',
      totalCount: '',
      negative: ['舆情时间', '舆情标题', '来源', '关键词', '预警时间'],
      entName: this.$route.query.entname,
      publicData: [],
      // 分页的当前页数
      listParams: {
        pageNum1: 1,
        pageSize1: 10
      },
      total1: 0,
      tHeader: ['预警时间', '关键词', '网址', '快照'],
      data: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      noData: false
    }
  },
  methods: {
    // 获取负面舆情数据
    getPublicList() {
      let _this = this
      _this.noData = false
      let params = {
        entName: _this.entName,
        pageNum: _this.listParams.pageNum1,
        pageSize: _this.listParams.pageSize1
      }
      api
        .getSuperviseEnt(params)
        .then(rtn => {
          _this.publicData = rtn.data.list
          _this.total1 = rtn.data.total
        })
        .catch(err => {
          _this.pageState = err
        })
    },
    // 获取关键词数据
    getAntistopList() {
      this.noData = false
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        entName: this.$route.query.entname
      }
      api
        .getAntistopList(params)
        .then(rtn => {
          this.data = rtn.data.list
          this.total = rtn.data.total
          this.pageState.code = this.data.length ? Code.Success : Code.NoData
        })
        .catch(err => {
          this.pageState = err
        })
    },
    handleSizeChange() {
      // 当pagesize改变的时候出发该函数
    },
    paging(index) {
      this.listParams.pageNum1 = index
      this.getPublicList()
    },
    handleCurrentChange(index) {
      // 当切换页码的时候出发的函数
      this.pageNum = index
      this.getAntistopList()
    },
    // 获取柱状图数据
    getList(data) {
      this.noData = false
      let params = {
        entName: this.$route.query.entname
      }
      // let _this = this
      api.getkeywordHitInfo(params).then(rtn => {
        this.totalCount = rtn.data.totalCount
        // eslint-disable-next-line
        // transfer.$emit('riskNum', 'specialWord:' + _this.totalCount)
        let data = {
          name: Object.keys(rtn.data.keywordCount),
          value: Object.values(rtn.data.keywordCount)
        }
        // console.log(data)
        if (data.name.length === 0) {
          this.noData = true
        } else {
          this.noData = false
          this.initChart(data)
        }
      })
    },
    initChart(data) {
      const chartDom = document.getElementById('specialWordChart')
      // eslint-disable-next-line
      const chart = echarts.init(chartDom)
      let option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '7%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data.name,
            axisTick: {
              show: false,
              alignWithLabel: true,
              color: '#ccc'
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#808080',
              rotate: 45
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#808080'
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              normal: {
                // eslint-disable-next-line
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#20aeff' },
                  { offset: 1, color: '#17a1ef' }
                ])
              }
            },
            data: data.value
          }
        ]
      }
      chart.setOption(option)
    }
  },
  mounted() {
    this.getPublicList()
    this.getList()
    this.getAntistopList()
    this.entname = this.$route.query.entname
  },
  components: {
    jNoData
  }
}
</script>
<style lang="scss" scoped>
.special-word {
  padding: 25px 40px 40px;
  .detail-title {
    margin-bottom: 0px;
  }
  .detail-base-title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    padding: 30px 0 10px 12px;
    margin-bottom: 15px;
    position: relative;
    background-image: linear-gradient(0deg,#1891ef,#1891ef);
    background-size: 3px 16px;
    background-position: 0 37px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #eee;
  }
  .merge {
    margin-bottom: 20px;
  }
  table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    td,
    th {
      border: 1px solid #e2e2e2;
    }
    th {
      line-height: 38px;
      color: #999;
      background: #f2f1f1;
    }
    td {
      line-height: 40px;
      padding: 0 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .special-word-chart {
    height: 350px;
    margin-bottom: 30px;
  }
}
</style>



// WEBPACK FOOTER //
// src/view/relationDetail/specialWord.vue